<template>
  <div class="redio-button-div">
    <label class="redio-button-lable">{{radioItem}}</label>
    <input type="radio" :name="radioName" :value="radioValue" @click="onClick()"/>
  </div>
</template>

<script>

export default {
  name: "RedioComponent",
  data(){
    return{
      radioName:undefined
    }
  },
  props: {
    radioItem:String,
    radioValue:String,
  },
  methods:{
    onClick:function () {
      this.$parent.$emit("inputValueChange",this.radioValue);
    }
  },
  mounted() {
    let parent = this.$parent;
    if(undefined!==parent){
      this.radioName = parent.radioGroupItem;
    }
  },
  destroyed() {
    this.$parent.$emit("inputUnRegist",this.inputName);
  }
}
</script>

<style scoped>
  .redio-button-div{
    display: inline-block;
    padding-left: 15px;
  }
  .redio-button-lable{
    font-size: smaller;
  }
</style>